﻿<!DOCTYPE html>
<html>
  <head>
    <title>Image 图片</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/image___/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/axure/axQuery.js"></script>
    <script src="resources/scripts/axure/globals.js"></script>
    <script src="resources/scripts/axutils.js"></script>
    <script src="resources/scripts/axure/annotation.js"></script>
    <script src="resources/scripts/axure/axQuery.std.js"></script>
    <script src="resources/scripts/axure/doc.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/messagecenter.js"></script>
    <script src="resources/scripts/axure/events.js"></script>
    <script src="resources/scripts/axure/recording.js"></script>
    <script src="resources/scripts/axure/action.js"></script>
    <script src="resources/scripts/axure/expr.js"></script>
    <script src="resources/scripts/axure/geometry.js"></script>
    <script src="resources/scripts/axure/flyout.js"></script>
    <script src="resources/scripts/axure/ie.js"></script>
    <script src="resources/scripts/axure/model.js"></script>
    <script src="resources/scripts/axure/repeater.js"></script>
    <script src="resources/scripts/axure/sto.js"></script>
    <script src="resources/scripts/axure/utils.temp.js"></script>
    <script src="resources/scripts/axure/variables.js"></script>
    <script src="resources/scripts/axure/drag.js"></script>
    <script src="resources/scripts/axure/move.js"></script>
    <script src="resources/scripts/axure/visibility.js"></script>
    <script src="resources/scripts/axure/style.js"></script>
    <script src="resources/scripts/axure/adaptive.js"></script>
    <script src="resources/scripts/axure/tree.js"></script>
    <script src="resources/scripts/axure/init.temp.js"></script>
    <script src="files/image___/data.js"></script>
    <script src="resources/scripts/axure/legacy.js"></script>
    <script src="resources/scripts/axure/viewer.js"></script>
    <script src="resources/scripts/axure/math.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (Rectangle) -->
      <div id="u12190" class="ax_default box_2">
        <img id="u12190_img" class="img " src="images/image___/u12190.png"/>
        <!-- Unnamed () -->
        <div id="u12191" class="text" style="visibility: visible;">
          <p><span>加载失败</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12192" class="ax_default label">
        <img id="u12192_img" class="img " src="images/image___/u12192.png"/>
        <!-- Unnamed () -->
        <div id="u12193" class="text" style="visibility: visible;">
          <p><span>Image 图片</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12194" class="ax_default label">
        <img id="u12194_img" class="img " src="images/image___/u12194.png"/>
        <!-- Unnamed () -->
        <div id="u12195" class="text" style="visibility: visible;">
          <p><span>图片容器，在保留原生img的特性下，支持懒加载，自定义占位、加载失败等</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12196" class="ax_default label">
        <img id="u12196_img" class="img " src="images/icon_图标/u486.png"/>
        <!-- Unnamed () -->
        <div id="u12197" class="text" style="visibility: visible;">
          <p><span>基础用法</span></p>
        </div>
      </div>

      <!-- Unnamed (Image) -->
      <div id="u12198" class="ax_default _图片">
        <img id="u12198_img" class="img " src="images/avatar___/u8638.jpg"/>
        <!-- Unnamed () -->
        <div id="u12199" class="text" style="display: none; visibility: hidden">
          <p><span></span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12200" class="ax_default label">
        <img id="u12200_img" class="img " src="images/image___/u12200.png"/>
        <!-- Unnamed () -->
        <div id="u12201" class="text" style="visibility: visible;">
          <p><span>原图（原尺寸：800x572，已等比缩放 )</span></p>
        </div>
      </div>

      <!-- fill (Group) -->
      <div id="u12202" class="ax_default" data-label="fill">

        <!-- 容器(100*100) (Rectangle) -->
        <div id="u12203" class="ax_default box_3" data-label="容器(100*100)">
          <img id="u12203_img" class="img " src="images/avatar___/容器_100_100__u8636.png"/>
          <!-- Unnamed () -->
          <div id="u12204" class="text" style="display: none; visibility: hidden">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Image) -->
        <div id="u12205" class="ax_default _图片">
          <img id="u12205_img" class="img " src="images/avatar___/u8638.jpg"/>
          <!-- Unnamed () -->
          <div id="u12206" class="text" style="display: none; visibility: hidden">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12207" class="ax_default label">
        <img id="u12207_img" class="img " src="images/color___/u356.png"/>
        <!-- Unnamed () -->
        <div id="u12208" class="text" style="visibility: visible;">
          <p><span>fill（依据容器比例缩放图片，图片比例失衡）</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12209" class="ax_default label">
        <img id="u12209_img" class="img " src="images/image___/u12209.png"/>
        <!-- Unnamed () -->
        <div id="u12210" class="text" style="visibility: visible;">
          <p><span>contain（依据容器宽度等比缩放图片，图片无法填满容器）</span></p>
        </div>
      </div>

      <!-- cover (Group) -->
      <div id="u12211" class="ax_default" data-label="cover">

        <!-- 容器(100*100) (Rectangle) -->
        <div id="u12212" class="ax_default box_3" data-label="容器(100*100)">
          <img id="u12212_img" class="img " src="images/avatar___/容器_100_100__u8641.png"/>
          <!-- Unnamed () -->
          <div id="u12213" class="text" style="display: none; visibility: hidden">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Image) -->
        <div id="u12214" class="ax_default _图片">
          <img id="u12214_img" class="img " src="images/avatar___/u8638.jpg"/>
          <!-- Unnamed () -->
          <div id="u12215" class="text" style="display: none; visibility: hidden">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Image) -->
      <div id="u12216" class="ax_default _图片">
        <img id="u12216_img" class="img " src="images/avatar___/u8645.png"/>
        <!-- Unnamed () -->
        <div id="u12217" class="text" style="display: none; visibility: hidden">
          <p><span></span></p>
        </div>
      </div>

      <!-- Unnamed (Image) -->
      <div id="u12218" class="ax_default _图片">
        <img id="u12218_img" class="img " src="images/avatar___/u8647.png"/>
        <!-- Unnamed () -->
        <div id="u12219" class="text" style="display: none; visibility: hidden">
          <p><span></span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12220" class="ax_default label">
        <img id="u12220_img" class="img " src="images/image___/u12220.png"/>
        <!-- Unnamed () -->
        <div id="u12221" class="text" style="visibility: visible;">
          <p><span>cover（依据容器高度等比缩放图片，并取图片中间位置在容器中展示）</span></p>
        </div>
      </div>

      <!-- Unnamed (Image) -->
      <div id="u12222" class="ax_default _图片">
        <img id="u12222_img" class="img " src="images/avatar___/u8638.jpg"/>
        <!-- Unnamed () -->
        <div id="u12223" class="text" style="display: none; visibility: hidden">
          <p><span></span></p>
        </div>
      </div>

      <!-- 容器(100*100) (Rectangle) -->
      <div id="u12224" class="ax_default box_3" data-label="容器(100*100)">
        <img id="u12224_img" class="img " src="images/avatar___/容器_100_100__u8641.png"/>
        <!-- Unnamed () -->
        <div id="u12225" class="text" style="visibility: visible;">
          <p><span>容器100x100</span></p>
        </div>
      </div>

      <!-- Unnamed (Connector) -->
      <div id="u12226" class="ax_default _连接线">
        <img id="u12226_seg0" class="img " src="images/image___/u12226_seg0.png" alt="u12226_seg0"/>
        <img id="u12226_seg1" class="img " src="images/image___/u12226_seg1.png" alt="u12226_seg1"/>
        <!-- Unnamed () -->
        <div id="u12227" class="text" style="display: none; visibility: hidden">
          <p><span></span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u12228" class="ax_default">

        <!-- Unnamed (Image) -->
        <div id="u12229" class="ax_default _图片">
          <img id="u12229_img" class="img " src="images/avatar___/u8638.jpg"/>
          <!-- Unnamed () -->
          <div id="u12230" class="text" style="display: none; visibility: hidden">
            <p><span></span></p>
          </div>
        </div>

        <!-- 容器(100*100) (Rectangle) -->
        <div id="u12231" class="ax_default box_3" data-label="容器(100*100)">
          <img id="u12231_img" class="img " src="images/image___/容器_100_100__u12231.png"/>
          <!-- Unnamed () -->
          <div id="u12232" class="text" style="visibility: visible;">
            <p><span>容器</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12233" class="ax_default label">
        <img id="u12233_img" class="img " src="images/image___/u12233.png"/>
        <!-- Unnamed () -->
        <div id="u12234" class="text" style="visibility: visible;">
          <p><span>none（图片默认展示容器尺寸的内容）</span></p>
        </div>
      </div>

      <!-- Unnamed (Connector) -->
      <div id="u12235" class="ax_default _连接线">
        <img id="u12235_seg0" class="img " src="images/image___/u12235_seg0.png" alt="u12235_seg0"/>
        <img id="u12235_seg1" class="img " src="images/image___/u12226_seg1.png" alt="u12235_seg1"/>
        <!-- Unnamed () -->
        <div id="u12236" class="text" style="display: none; visibility: hidden">
          <p><span></span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12237" class="ax_default label">
        <img id="u12237_img" class="img " src="images/image___/u12237.png"/>
        <!-- Unnamed () -->
        <div id="u12238" class="text" style="visibility: visible;">
          <p><span>scale-down（额~样式上看不出和contain的区别）</span></p>
        </div>
      </div>

      <!-- cover (Group) -->
      <div id="u12239" class="ax_default" data-label="cover">

        <!-- 容器(100*100) (Rectangle) -->
        <div id="u12240" class="ax_default box_3" data-label="容器(100*100)">
          <img id="u12240_img" class="img " src="images/avatar___/容器_100_100__u8641.png"/>
          <!-- Unnamed () -->
          <div id="u12241" class="text" style="display: none; visibility: hidden">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Image) -->
        <div id="u12242" class="ax_default _图片">
          <img id="u12242_img" class="img " src="images/avatar___/u8638.jpg"/>
          <!-- Unnamed () -->
          <div id="u12243" class="text" style="display: none; visibility: hidden">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12244" class="ax_default label">
        <img id="u12244_img" class="img " src="images/icon_图标/u486.png"/>
        <!-- Unnamed () -->
        <div id="u12245" class="text" style="visibility: visible;">
          <p><span>占位图片</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12246" class="ax_default label">
        <img id="u12246_img" class="img " src="images/icon_图标/u508.png"/>
        <!-- Unnamed () -->
        <div id="u12247" class="text" style="visibility: visible;">
          <p><span>除了默认占位图片外，还支持自定义。</span></p>
        </div>
      </div>

      <!-- Unnamed (Image) -->
      <div id="u12248" class="ax_default _图片">
        <img id="u12248_img" class="img " src="images/image___/u12248.jpg"/>
        <!-- Unnamed () -->
        <div id="u12249" class="text" style="display: none; visibility: hidden">
          <p><span></span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12250" class="ax_default label">
        <img id="u12250_img" class="img " src="images/admin/一级面包屑_u233.png"/>
        <!-- Unnamed () -->
        <div id="u12251" class="text" style="visibility: visible;">
          <p><span>默认</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u12252" class="ax_default">

        <!-- Unnamed (Rectangle) -->
        <div id="u12253" class="ax_default box_2">
          <img id="u12253_img" class="img " src="images/image___/u12190.png"/>
          <!-- Unnamed () -->
          <div id="u12254" class="text" style="display: none; visibility: hidden">
            <p><span></span></p>
          </div>
        </div>

        <!-- Unnamed (Shape) -->
        <div id="u12255" class="ax_default _形状">
          <img id="u12255_img" class="img " src="images/image___/u12255.png"/>
          <!-- Unnamed () -->
          <div id="u12256" class="text" style="display: none; visibility: hidden">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12257" class="ax_default label">
        <img id="u12257_img" class="img " src="images/radio_单选框/u2219.png"/>
        <!-- Unnamed () -->
        <div id="u12258" class="text" style="visibility: visible;">
          <p><span>自定义</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12259" class="ax_default label">
        <img id="u12259_img" class="img " src="images/icon_图标/u486.png"/>
        <!-- Unnamed () -->
        <div id="u12260" class="text" style="visibility: visible;">
          <p><span>加载失败</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12261" class="ax_default label">
        <img id="u12261_img" class="img " src="images/color___/u358.png"/>
        <!-- Unnamed () -->
        <div id="u12262" class="text" style="visibility: visible;">
          <p><span>懒加载</span></p>
        </div>
      </div>

      <!-- Panel (Dynamic Panel) -->
      <div id="u12263" class="ax_default" data-label="Panel">
        <div id="u12263_state0" class="panel_state" data-label="State1">
          <div id="u12263_state0_content" class="panel_state_content">

            <!-- Image_loading (Repeater) -->
            <div id="u12264" class="ax_default" data-label="Image_loading">
              <script id="u12264_script" type="axure-repeater-template" data-label="Image_loading">

                <!-- Unnamed (Image) -->
                <div id="u12265" class="ax_default image u12265">
                  <img id="u12265_img" class="img u12265_img" src="images/image___/u12265.png"/>
                  <!-- Unnamed () -->
                  <div id="u12266" class="u12266 text" style="display: none; visibility: hidden">
                    <p><span></span></p>
                  </div>
                </div>
              </script>
              <div id="u12264-1" class="preeval" style="width: 760px; height: 430px;">

                <!-- Unnamed (Image) -->
                <div id="u12265-1" class="ax_default image u12265">
                  <img id="u12265-1_img" class="img u12265_img" src="images/image___/p0.jpeg"/>
                  <!-- Unnamed () -->
                  <div id="u12266-1" class="u12266 text" style="display: none; visibility: hidden">
                    <p><span></span></p>
                  </div>
                </div>
              </div>
              <div id="u12264-2" class="preeval" style="width: 760px; height: 430px;">

                <!-- Unnamed (Image) -->
                <div id="u12265-2" class="ax_default image u12265">
                  <img id="u12265-2_img" class="img u12265_img" src="images/image___/p1.jpeg"/>
                  <!-- Unnamed () -->
                  <div id="u12266-2" class="u12266 text" style="display: none; visibility: hidden">
                    <p><span></span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Loading (Rectangle) -->
      <div id="u12267" class="ax_default box_2 ax_default_hidden" data-label="Loading" style="display: none; visibility: hidden">
        <img id="u12267_img" class="img " src="images/image___/loading_u12267.png"/>
        <!-- Unnamed () -->
        <div id="u12268" class="text" style="visibility: visible;">
          <p><span>正在加载...</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u12269" class="ax_default box_2">
        <img id="u12269_img" class="img " src="images/color___/u352.png"/>
        <!-- Unnamed () -->
        <div id="u12270" class="text" style="display: none; visibility: hidden">
          <p><span></span></p>
        </div>
      </div>
    </div>
  </body>
</html>
